<template>
    <view
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >
        <view class="containers" :style="{
			backgroundColor:componentData.data.bgColor,
			height:componentData.data.parentHeight * 2 + 'rpx'
		}">
			<diy-navigator :url="componentData.data.link" @callback="callback">
                <image
                    class="img"
                    :src="componentData.data.imageUrl"
                    :style="
                        'width:' +
                        componentData.data.width * 2 +
                        'rpx;' +
                        'height:' +
                        componentData.data.height * 2 +
                        'rpx;' +
                        'left:' +
                        componentData.data.left * 2 +
                        'rpx;' +
                        'top:' +
                        componentData.data.top * 2 +
                        'rpx;' +
                        'border-radius:' +
                        componentData.data.borderRadius * 2 +
                        'rpx;'
                    "
                    @tap="toPath"
                    lazy-load
                ></image>
                <block v-if="!componentData.data.link && componentData.data.hotArea && componentData.data.hotArea.length">
                    <view
                        class="img-hot-container"
                        :style="
                            'width:' +
                            componentData.data.width * 2 +
                            'rpx;' +
                            'height:' +
                            componentData.data.height * 2 +
                            'rpx;' +
                            'margin-left:' +
                            componentData.data.left * 2 +
                            'rpx;' +
                            'margin-top:' +
                            componentData.data.top * 2 +
                            'rpx;' +
                            'border-radius:' +
                            componentData.data.borderRadius * 2 +
                            'rpx;'
                        "
                    >
                        <view class="img-hot-wrap">
                            <block v-for="(item, index) in componentData.data.hotArea" :key="index">
                                <diy-navigator :url="item.url" @callback="callback">
                                    <view
                                        class="img-hot-area"
                                        :style="
                                            'width:' +
                                            (item.rb.x - item.lt.x) * 2 +
                                            'rpx;' +
                                            'height:' +
                                            (item.rb.y - item.lt.y) * 2 +
                                            'rpx;' +
                                            'left:' +
                                            item.lt.x * 2 +
                                            'rpx;' +
                                            'top:' +
                                            item.lt.y * 2 +
                                            'rpx;'
                                        "
                                    ></view>
                                </diy-navigator>
                            </block>
                        </view>
                    </view>
                </block>
            </diy-navigator>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// components/diy-img/diy-img.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    watch: {
        componentData: {
            handler: function () {
                // console.log('diy-img:' + this.componentData);
            },

            immediate: true,
            deep: true
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        toPath() {},

        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        }
    }
};
</script>
<style>
@import './diy-img.css';
</style>
